<template>
  <div>
    <div style="margin-bottom:20px">
      <el-input
        v-model="search"
        style="width:300px"
        placeholder="请输入要查找的姓名"
        value-key="resultStr"
        @keyup.enter.native="handleSelect2"
      />
      <!-- <el-autocomplete
        v-model="search"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入要查找的姓名"
        value-key="resultStr"
        @select="handleSelect"
        @keyup.enter.native="handleSelect2"
      /> -->
      <el-button>
        搜索
      </el-button>
      <el-button @click="handleAddUser">
        添加用户
      </el-button>
    </div>
    <el-table
      :data="userList"
      border
      fit
      highlight-current-row
      style="width: 100%;min-height:200px"
      @row-click="clickRow"
    >
      <el-table-column
        v-loading="loading"
        align="center"
        label="编号"
        width="65"
        element-loading-text="请给我点时间！"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="性别"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.sexC }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="年龄"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.age }}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="120px"
        label="就诊次数"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="消费金额"
        width="95"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.amount }}</span>
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col"
        label="状态"
        width="110"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">
            <!-- {{ row.status }} -->
            {{ row.level }}级会员
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        label="详情"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope)"
          >撰写病例</el-button>
        </template>
      </el-table-column> -->

    </el-table>
    <el-pagination
      class="pagination"
      :current-page="pageNum"
      :page-size="pageSize"
      layout="total,sizes,  prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <div style="text-align:right;">
      <el-button
        type="danger"
        @click="handleCancel"
      >取消</el-button>
      <el-button
        type="primary"
        @click="handleConfirm"
      >确定</el-button>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="'新建会员'"
      append-to-body
    >
      <el-form
        :model="user"
        label-width="80px"
        label-position="left"
      >
        <el-form-item
          label="手机号"
          required=""
        >
          <el-input
            v-model="user.mobile"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item
          label="姓名"
          required=""
        >
          <el-input
            v-model="user.username"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item
          label="性别"
          required=""
        >
          <el-radio-group v-model="user.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="会员等级"
          required=""
        >
          <el-select
            v-model="user.level"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="出生日期"
          required=""
        >
          <el-date-picker
            v-model="user.birthday"
            type="date"
            value-format="timestamp"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button
          type="danger"
          @click="dialogVisible=false"
        >取消</el-button>
        <el-button
          type="primary"
          @click="confirmRole"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUser, getUserMobile, getUserInfo, getQuery, addUser } from '@/api/user'
import { sexC } from '@/utils/role'
import { addPrescription } from '@/api/prescription'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    type: {
      type: String,
      default: 'CN'
    }
  },
  data() {
    return {
      dialogVisible: false,
      userList: [],
      listQuery: {
        page: 1,
        limit: 5,
        type: this.type,
        sort: '+id'
      },
      search: '',
      pageNum: 1, // 默认每页显示1条数据
      pageSize: 10,
      loading: false,
      totalCount: 0,
      selectUser: {},
      user: {},
      options: [{
        value: '1',
        label: '1级会员'
      }, {
        value: '2',
        label: '2级会员'
      }, {
        value: '3',
        label: '3级会员'
      }, {
        value: '4',
        label: '4级会员'
      }, {
        value: '5',
        label: '5级会员'
      }]
    }
  },
  created() {
    this.getUser({
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      queryStatic: 1
    })
  },
  methods: {
    async getUser(data) {
      const res = await getUser(data)
      console.log(res)
      const list = res.data.list
      for (const i in list) {
        list[i].sexC = sexC(list[i].sex)
        list[i].key = i
      }
      this.userList = list
      this.totalCount = res.data.total
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleCancel() {
      // this.$router.push('/')
      this.$emit('handleCancel')
    },
    handleConfirm() {
      this.$emit('confirm', this.selectUser)
    },
    handleSizeChange(page) {
      this.pageSize = page
      this.getUser({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    handleCurrentChange(page) {
      this.pageNum = page
      this.getUser({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    clickRow(row) {
      this.selectUser = row
    },
    async querySearchAsync(queryString, cb) {
      var results = []
      if (queryString) {
        const queryData = { username: queryString, pageSize: 20 }
        const { data } = await getQuery(queryData)
        console.log(data)
        if (data.length === 0) {
          results = [{ 'resultStr': '暂无数据' }]
          cb(results)
        } else {
          results = data
          cb(results)
        }
      } else {
        cb(results)
      }
    },
    async handleSelect(item) {
      const res = await getUserInfo({ searchStr: this.search })
      console.log(res)
      this.userList = res.data.list
    },
    async handleSelect2() {
      const res = await getUserInfo({ searchStr: this.search })
      console.log(res)
      this.userList = res.data.list
    },
    async confirmRole() {
      const userdata = Object.assign(this.user)
      // userdata.birthday = userdata.birthday.getTime()
      const { data } = await addUser(userdata)
      this.user.id = data
      this.dialogVisible = false
      const  data2 = await addPrescription({
        userId: data, medicationTimeStart: Date.parse(new Date()), medicationTimeEnd: Date.parse(new Date())
      })
      console.log(data2.data)
      this.$router.push({
        name: 'prescriptionDetail',
        params: {
          prescriptionId: data2.data
        }
      })
    },
    handleAddUser() {
      this.dialogVisible = true
    }
  }
}
</script>

